<template>
    <div class="chart">
        <div>{{chartData.name1}}{{chartData.name2?chartData.name2:chartData.kpiName}}</div>
        <div class="kpiCode">指标编码：{{chartData.name3?chartData.name3:chartData.kpiId}}</div>
        <div class="wrap" :id="'customerChart'+index"></div>
    </div>
</template>
<script>
import { reactive, toRefs, onMounted } from "vue"
import * as echarts from "echarts"
export default {
    props: ["chartData", "cindex"],
    setup(props) {
        const state = reactive({
            dateArr: [],
            index: props.cindex
        })
        function initEcharts() {
            let days = []
            let item = props.chartData
            var dateType = item.dateType
            item.days.forEach((element) => {
                if ("M" == dateType) {
                    let day = element.substring(4)
                    day = day.substr(0, 2) + "月"
                    days.push(day)
                } else {
                    let day = element.substring(4)
                    day = day.substr(0, 2) + "-" + day.substr(2, 2)
                    days.push(day)
                }
            })
            let start = 0
            if (days.length > 7) {
                start = ((days.length - 7) / days.length) * 100
            }
            const option = {
                grid: {
                    top: 30,
                    bottom: 20,
                    left: 50,
                    right: 10
                },
                tooltip: {
                    trigger: "axis"
                },
                dataZoom: [
                    {
                        type: "slider",
                        start: start,
                        end: 100,
                        handleSize: "80%",
                        brushSelect: false,
                        minSpan: (7 / days.length) * 100,
                        handleIcon:
                            "M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z"
                    },
                    {
                        type: "inside", // 内置于坐标系中
                        start: 0,
                        end: 100,
                        maxSpan: 100,
                        minSpan: (7 / days.length) * 100
                    }
                ],
                xAxis: [
                    {
                        type: "category",
                        data: state.dateArr,
                        axisLine: {
                            lineStyle: {
                                color: "#ccc"
                            }
                        },
                        axisTick: {
                            show: false
                        },
                        axisLabel: {
                            color: "#999",
                            fontSize: 10
                        }
                    }
                ],
                yAxis: [
                    {
                        type: "value",
                        splitLine: {
                            lineStyle: {
                                type: "dashed",
                                color: "#DDD"
                            }
                        },
                        axisLine: {
                            show: false,
                            lineStyle: {
                                color: "#333"
                            }
                        },
                        axisLabel: {
                            color: "#999",
                            formatter: function (value, index) {
                                if (value >= 1000 && value < 10000) {
                                    return value / 1000 + "千"
                                } else if (
                                    value >= 10000 &&
                                    value < 100000000
                                ) {
                                    return value / 10000 + "万"
                                } else if (value >= 100000000) {
                                    return value / 100000000 + "亿"
                                } else if (
                                    value >= -100000000 &&
                                    value < -10000
                                ) {
                                    return value / 10000 + "万"
                                } else if (value < -100000000) {
                                    return value / 10000 + "亿"
                                } else {
                                    return value
                                }
                            }
                        },
                        axisTick: {
                            show: false
                        },
                        nameTextStyle: {
                            color: "#999"
                        },
                        splitArea: {
                            show: false
                        }
                    }
                ],
                series: [
                    {
                        name: "指标值",
                        type: "line",
                        data: props.chartData.values,
                        lineStyle: {
                            normal: {
                                width: 2,
                                color: {
                                    type: "linear",

                                    colorStops: [
                                        {
                                            offset: 0,
                                            color: "#48D8BF" // 0% 处的颜色
                                        },
                                        {
                                            offset: 1,
                                            color: "#48D8BF" // 100% 处的颜色
                                        }
                                    ],
                                    globalCoord: false // 缺省为 false
                                },
                                shadowColor: "rgba(72,216,191, 0.3)",
                                shadowBlur: 10,
                                shadowOffsetY: 20
                            }
                        },
                        itemStyle: {
                            normal: {
                                color: "#48D8BF",
                                borderWidth: 2,
                                fontSize: 10,
                                borderColor: "#48D8BF",
                                label: {
                                    show: true,
                                    // color: "#F58080",
                                    rotate: 30,
                                    formatter: function (params) {
                                        if (params.data.indexOf(".") === 0) {
                                            //以'.'开头补0
                                            return "0" + params.data
                                        } else if (
                                            params.data.indexOf("-") === 0 &&
                                            params.data.indexOf(".") === 1
                                        ) {
                                            //以'.-'开头补0
                                            return "-0" + params.data.substr(1)
                                        }

                                        if (
                                            params.data >= 10000 &&
                                            params.data < 100000000
                                        ) {
                                            return (
                                                (params.data / 10000.0).toFixed(
                                                    2
                                                ) + "万"
                                            )
                                        } else if (params.data >= 100000000) {
                                            return (
                                                (
                                                    params.data / 100000000.0
                                                ).toFixed(2) + "亿"
                                            )
                                        } else {
                                            return params.data
                                        }
                                    }
                                }
                            }
                        },
                        smooth: true
                    }
                ]
            }
            let myChart = echarts.init(
                document.getElementById("customerChart" + state.index)
            )
            myChart.setOption(option)
            //监听窗口的变化，不想屏幕自适应可以不写
            window.addEventListener("resize", function () {
                myChart.resize()
            })
        }
        onMounted(() => {
            let oldDate = props.chartData.days
            for (let i = 0; i < oldDate.length; i++) {
                let date = oldDate[i]
                let monthDate = date.substr(4, 4)
                let newDate =
                    monthDate.substr(0, 2) + "-" + monthDate.substr(2, 2)
                state.dateArr.push(newDate)
            }
            initEcharts()
        })
        return {
            ...toRefs(state)
        }
    }
}
</script>
<style lang='scss' scoped>
.chart {
    width: 100%;
    margin-top: 10px;
    background-color: #fff;
    padding: 10px 0 2px;
    border-radius: 5px;
    div {
        text-align: center;
        color: #666;
        font-size: 14px;
        &.kpiCode {
            margin-top: 10px;
            font-size: 12px;
            color: #666;
            font-weight: normal;
        }
    }
    .wrap {
        width: 100%;
        height: 160px;
    }
}
</style>